<template>
	
	<el-dialog v-model="dialogVisible" :title="formText" :destroy-on-close="true" width="1200">
	<div class="selectUser" v-loading="loading">
	
		<div class=" app_ny" style="margin-bottom: 10px;">
			<div class="div2" style="position: relative">
				<el-row :gutter="12" style="width: 100%">
					<el-col :span="4">
						<el-input v-model="queryParams.name" placeholder="请输入物品名称" clearable />
					</el-col>
					
					<el-col :span="4">
						<el-input v-model="queryParams.sku" placeholder="请输入物品编码" clearable />
					</el-col>
					<el-col :span="4">
						<el-input v-model="queryParams.brand" placeholder="请输入品牌" clearable />
					</el-col>
					<el-col :span="4">
						<el-input v-model="queryParams.specs" placeholder="请输入规格型号" clearable />
					</el-col>
					<el-col :span="8">
						<el-button :loading="loading" type="primary" @click="handleQuery">
							<template #icon><i-ep-search /></template>查询</el-button>
						<el-button :loading="loading" type="primary" @click="handleSubmit">
							<template #icon><i-ep-pointer /></template>添加</el-button>	
					
					</el-col>
				</el-row>
				<FilterColumn class="filtBox" @handleRefresh="resetQuery()" :columns="false" ></FilterColumn>
			</div>
		</div>
		<el-table ref="dataTableRef" 
				size="small" 
				:data="tableData"
				align="left" 
				tooltip-effect="dark"
				:scrollbar-always-on="true" 
				:show-overflow-tooltip="true"
				border>
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column type="index" label="序号" align="center" width="60" />
			<el-table-column label="图片" align="center"  width="60" prop="image">
				<template #default="scope">
					<el-image style="width: 34px; height: 34px" :src="scope.row.image" :zoom-rate="1.2" :max-scale="7"
						:min-scale="0.2" :preview-src-list="[scope.row.image]" :initial-index="0" fit="cover" />
				</template>
			</el-table-column>
			<el-table-column label="名称" align="center" prop="name" min-width="140"></el-table-column>
			<el-table-column label="编码" align="center" prop="sku" min-width="100" />
			<el-table-column label="物料号" align="center" prop="part_no" min-width="100"></el-table-column>
			<el-table-column label="品牌" align="center" prop="brand" min-width="100" />
			<el-table-column label="规格型号" align="center" prop="specs" min-width="100" />
			<el-table-column label="单位" align="center" prop="unit" min-width="60" />
			<el-table-column label="备注" align="center" prop="mark" min-width="150"></el-table-column>
		</el-table>
		<pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.page"
			v-model:limit="queryParams.limit" @pagination="handleQuery" />
	</div>
	</el-dialog> 
</template>


<script setup lang="ts">
	defineOptions({
		name: "Stockroom",
		inheritAttrs: false,
	});

	//接口地址
	import {
		getGoodsOptions
	} from "@/api/wms";
	const emit = defineEmits(['getSelectItems']);
	const dataTableRef = ref();
	const queryParams = reactive({
		page: 1,
		limit: 20,
		cid:"",//公司
		name: "",//物品名称
		sku: "",//编码
		brand: "",//品牌
		specs: "",//规格
		part_no: ""//编号
	})
	const loading = ref(false);
	const total = ref(0);
	const tableData = ref();
	const dialogVisible =ref(false);
	const dialogStatus = ref<string>(""); // 操作行为 formText
	const formText =ref<string>(""); // 操作窗口标题
	const parentsData=ref<any>();//父级传来的参数
	
	//新增或者修改加载load按钮
	function handleShow(row : any, act : string) {
		console.log(row)
		parentsData.value =row;
		formText.value="物品信息";
		dialogStatus.value= act;
		queryParams.cid = row.cid;
		dialogVisible.value = true;
		handleQuery();
	}
	// 获取物品列表
	function handleQuery() {
		loading.value = true;
		getGoodsOptions(queryParams).then((res) => {
			console.log(res)
			tableData.value = res.data.list
			total.value = res.data.count
		}).finally(() => {
			loading.value = false;
		})
	}
	function handleSubmit() {
		const selectItems = dataTableRef.value.getSelectionRows();
		
		if(selectItems.length<=0)
		{
			ElMessage({
				message: '你未选中物品！',
				type: 'error'
			})
			return false;
		}
		const hasZero = selectItems.some(item => item.num == '0.0000' || item.num <= 0);
		if (hasZero) {
			ElMessage({
				message: '存在库存数不足的物品',
				type: 'error'
			})
			return false;
		}
		dialogVisible.value =false ;
		emit("getSelectItems", selectItems)
	}
	function resetQuery() {
		handleQuery();
	}
	
	defineExpose({
		handleShow
	});
	onMounted(() => {
		// handleQuery();
	})
</script>


<style scoped>
	.avatar-uploader .avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.min220 {
		width: 220px
	}
</style>